<template>
	<el-container>
    <el-header height="80px">
      <div class="logo">
        <h1>卓克艺术网采集中心</h1>
      </div>
    </el-header>
    <el-main>
      <el-row :gutter="20" >
        <el-col :span="8" :offset="8">
          <div class="login">
            <h1 class="title">登录</h1>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="账户" prop="username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item label="密　码" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <p class="footer">主办：安徽柏兰德文化传播有限公司   技术：final</p>
    </el-footer>
    </el-container>

</template>
<script>
  import Api from '@/api/index'
  import { setToken } from '@/utils/auth'
  import { setCache } from '@/utils/cache'
  import { setUser } from '@/utils/user'
  import ApiLocal from '@/api/local'

	export default {
  name: 'Login',
  data() {
    return {
      height:'200px',
      form: {
        username: '',
        password: '',
      },
      rules: {
          username: [
            { required: true, message: '请输入账户', trigger: 'blur' },
            { min: 2, message: '请输入正确的账户', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      }
    }
  },
  props: {
    num: {
      default: 0
    },
    info: {
      default: function () {
        return []
      }
    }
  },
  watch: {
    info: function(newsData) {
      console.log(newsData)
      this.user = newsData
    }
  },
  created() {
    Api.index().then(res=> {
      setCache('collect', res.collect)
    })
    ApiLocal.updateCollectConfig({})
    // this.getConfig()
  },
  mounted() {
    this.height = (window.innerHeight - 180 ) + 'px'
  },
  methods: {
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.device_name = 'pc'

            console.log(this.form)
            Api.login(this.form).then(res=> {
              console.log(res)
              this.$message({
                message: '登录成功！',
                type: 'success',
                onClose: r => {
                  console.log(res)
                  setToken(res.token)
                  setUser(res.user)
                  this.$store.commit('SET_USER', res.user)
                  this.$router.push({name: 'Index'})
                }
              })
              
            })
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    getConfig() {
      indexApi({}).then(res => {
        setCache('configs', res.config)
        setCache('index', res)
        this.school = res.school
      })
    }
  }

};

</script>
<style type="text/css" scoped>
.el-select{
  width: 100%;
}
.el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
.el-main{
  background-color: #cfe2ff;
}

.login{
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20%;
}
.title{
  text-align: center;
  margin: 20px;
  color: #1680ff;
}
.captchas{
  border-radius: 2px;
  margin-top: 6px;
}
.footer{font-size: 16px; text-align: center;}
</style>